/**
 * 九九乘法表，这里是你写代码的地方，其他的暂时不用管
 * 
 * 问题：用document.write 写 span标签的样式没生效
 *   直接 return div 不知道怎么把span标签放div里面去
 *   如果直接return span标签又会中断循环
 * 
 * 思路：做一个九九乘法表，参考原型图 paint 软件
 *    1 * 1 = 1 1 * 2 = 2 1 * 3 = 3 ...
 *    2 * 1 = 2 2 * 2 = 4 2 * 3 = 6 ...
 *    3 * 1 = 3 3 * 2 = 6 3 * 3 = 9 ...
 *    ...
 * 形式上是 y * x = xy y 表示纵轴的数字 从 1 - 9；x表示横轴数字 从 1 - 9
 * 令 y = 1; y < 10; y++ // y表示纵坐标乘数，也表示数组的横坐标数 也即是多少行的数据
 *   令 x = 1; x < 10; x++ // x表示横坐标乘数，也表示数组的纵坐标数 也即是多少列的数据
 * 两层循环即可遍历出二维数组，令结果 result = [
 * 
 *  ['1 * 1 = 1', '1 * 2 = 2', ...],
 *  ['2 * 1 = 2', '2 * 2 = 4', ...],
 *  [], [], [], [], [], [], []]
 * 例如 result[y - 1][x - 1] 表示 y 行 x 列的数据，如 result[1 - 1][2 - 1] 等于 第一行 第二列，也就是 2 * 2 = 4
 * 这是算法内容，如何返回要的数据呢，字符串其实就可以当做结果，只要在外面加上标签包裹就行了
 * <span>{result[y][x]}</span>
 * 
 * 先来解答第一个问题：document.write 写的 span 标签样式没生效
 */
import { Fragment, ReactElement, useEffect } from 'react'
import './index.less'
const NineNineTable = () => {

  // Array.from(Array(m), () => Array(n)) 方法可以构建二维数组，里面需要传递两个参数，第一个参数表示要创建的二维数组的行，第二个参数表示每个二维数组中行的列数
  // 固定用法，直接创建 m 行 n 列的数组
  // new Array(n) 方法可以构建一维数组 n 表示数组长度
  let result: string[][]
  const createStringDoubleArray = () => {
    result = Array.from(Array(9), () => Array(9))
    for (let y = 1; y < 10; y++) {
      for (let x = 1; x < 10; x++) {
        result[y - 1][x - 1] = y + ' * ' + x + ' = ' + x * y
      }
    }
  }

  createStringDoubleArray()

  useEffect(() => {
    // appendChildRender()
  }, [])

  const appendChildRender = () => {
    // 第一种方法，使用 ele.appendChild 渲染
    let parentNode = document.querySelector('#nine-nine-table') as Element
    // 尝试打印 parentNode
    console.log('parentNode', parentNode) // 结果是 null 想想为什么
    result.forEach((row: string[], y: number) => {
      row.forEach((item: string, x: number) => {
        if (x <= y) {
          let childEle = document.createElement('span')
          childEle.innerHTML = item
          // 不推荐使用标签作为选择器，避免样式污染
          childEle.setAttribute('class', 'table-cell')
          parentNode.appendChild(childEle)
        }
      })
      let brEle = document.createElement('br')
      parentNode.appendChild(brEle)
    })
  }

  /**
   * for 速度快，写起来稍微麻烦一点
   * forEach 速度慢，写起来复杂程度与 map 相同，与 map 不同的是，无返回值
   * map 速度慢，写起来复杂程度与 forEach 相同，与 forEach 不同的是，会返回一个长度与所遍历数组长度相同的数组（数组的值由返回值决定，如果没有返回值，就是一组 undefined，否则是每次返回的值组成的数组）
   * filter 过滤，用法以后再说
   * 对象遍历，用法以后再说
   */
  const reactRender = () => {
    let listEle: ReactElement[] = []
    for (let y = 0; y < 9; y++) {
      for (let x = 0; x <= y; x++) {
        listEle.push(<span className='table-cell' key={`${x}-${y}`}>{result[x][y]}</span>)
      }
      listEle.push(<br />)
    }
    return listEle
  }

  return <div id='nine-nine-table' className='nine-nine-table'>
    {/* {result.map((row: string[], y: number) => {
      return row.map((item: string, x: number) => { // y-x 1-2 1-3 2-3
        if (x == y) {
          return <Fragment key={`${x}-${y}`}>
            <span className='table-cell'>{item}</span><br/>
          </Fragment>
        } else if (x < y) {
          return <span className='table-cell' key={`${x}-${y}`}>{item}</span>
        }
      })
    })} */}
    {reactRender()}
  </div>
}

export default NineNineTable
